<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>水质指标对比分析</span>
      </div>
      <el-form :model="queryParams" ref="queryForm" :inline="true">
        <el-form-item label="时间范围">
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            @change="handleDateRangeChange"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
          <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

      <!-- 指标选择 -->
      <div class="indicator-select">
        <el-radio-group v-model="selectedIndicator" @change="handleIndicatorChange">
          <el-radio-button label="ph">pH值</el-radio-button>
          <el-radio-button label="dissolvedOxygen">溶解氧</el-radio-button>
          <el-radio-button label="cod">化学需氧量</el-radio-button>
          <el-radio-button label="nh3n">氨氮</el-radio-button>
          <el-radio-button label="totalPhosphorus">总磷</el-radio-button>
          <el-radio-button label="totalNitrogen">总氮</el-radio-button>
        </el-radio-group>
      </div>

      <!-- 图表容器 -->
      <div class="chart-container">
        <water-quality-bar-chart :chart-data="chartData" :indicator="selectedIndicator" />
      </div>
    </el-card>
  </div>
</template>

<script>
import { getWaterQualityComparisonData } from '@/api/system/waterquality';
import WaterQualityBarChart from './components/WaterQualityBarChart';

export default {
  name: 'WaterQualityComparison',
  components: {
    WaterQualityBarChart
  },
  data() {
    return {
      // 查询参数
      queryParams: {},
      // 日期范围
      dateRange: [],
      // 图表数据
      chartData: [],
      // 选中的指标
      selectedIndicator: 'ph',
      // 指标名称映射
      indicatorLabels: {
        ph: 'pH值',
        dissolvedOxygen: '溶解氧(mg/L)',
        cod: '化学需氧量(mg/L)',
        nh3n: '氨氮(mg/L)',
        totalPhosphorus: '总磷(mg/L)',
        totalNitrogen: '总氮(mg/L)'
      },
      // 加载状态
      loading: false
    };
  },
  created() {
    // 设置默认时间范围为最近30天
    const end = new Date();
    const start = new Date();
    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
    // this.dateRange = [this.parseTime(start, '{y}-{m}-{d}'), this.parseTime(end, '{y}-{m}-{d}')];
    this.dateRange = ["", ""];

    this.getList();
  },
  methods: {
    /** 查询水质对比数据 */
    getList() {
      this.loading = true;
      let startTime, endTime;

      // 检查dateRange是否为数组且长度为2
      if (Array.isArray(this.dateRange) && this.dateRange.length === 2) {
        [startTime, endTime] = this.dateRange;
      }

      getWaterQualityComparisonData(startTime, endTime).then(response => {
        this.chartData = response.data;
        this.loading = false;
      }).catch(() => {
        this.loading = false;
      });
    },
    /** 处理日期范围变化 */
    handleDateRangeChange(dateRange) {
      this.dateRange = dateRange;
    },
    /** 处理指标变化 */
    handleIndicatorChange(indicator) {
      this.selectedIndicator = indicator;
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    }
  }
};
</script>

<style scoped>
.indicator-select {
  margin: 20px 0;
}
.chart-container {
  width: 100%;
  height: 500px;
  margin-top: 20px;
}
</style>
